<template>
	<view class="">
		<shopro-login-modal></shopro-login-modal>
		<view class="content">
				<view class="head_box">
					<image style="width: 100%; height: 100%;
					 position: absolute; left: 0; z-index: -1;" mode="aspectFill" 
					 src="https://shiliu.gdxuanbao.com/static/upload/images/3/2021/11/bEwcqOqK9Ce4CWwoAcW99uSeucOsO8.png"></image>
					<!-- <image style="width: 550upx; height: 275upx; margin-top: 190upx;" src="../../static/images/hot-group/hot-group-index-tips.png"></image> -->
				</view>
				<!-- tab -->
				<scroll-view scroll-x class="tabs-content" enable-flex scroll-with-animation>
					<view class="order-nav">
						<view class="nav-item" v-for="(nav, index) in orderState"  :key="index"
							@tap="onNav(index, nav)">
							<view class="item-title" :class="{ 'item-title-active': tabindex === index }">{{ nav.name }}</view>
							<view class="nav-line" :class="{ 'line-active': tabindex === index }"></view>
						</view>
					</view>
				</scroll-view>
				
				<view class="chengtuan-box">
					<mescroll-body ref="mescrollRef" height="1050" @init="mescrollInit" @down="downCallback" @up="upCallback">
					<view class="chengtuan-list">
						<view class="chengtuan-item"
						v-for="(item, index) in homeCollage" :key="index">
							<view class="goods-img">
								<image :src="item.has_one_goods.thumb"></image>
							</view>
							<view class="goods-detail">
								<view class="goods-name text-line2">{{item.title}} </view>
								<view class="tips" style="color: #FF5E24;">{{item.fight_describe}}</view>
								<view style="display: flex; align-items: center; margin-top: 3upx;">
										 <view style="flex: 1;">
										 	<u-line-progress height="10" style="height: 11upx; width: 326upx;" active-color="#FF4F10"
										 		:percent="(item.ba_team.has_many_success_member_count/ item.has_many_option_levels[0]['member_num']) * 100"
										 		:show-percent="false"></u-line-progress>
										 </view>
									<view style="font-size: 22upx; color: #E5E5E5; margin-left: 16upx; padding-top: 10upx;"> <text
											style="color: #FF5E24;">{{item.ba_team.has_many_success_member_count}} </text> /{{item.has_many_option_levels[0]['member_num']}}</view>
								</view>
								<view class="price-box">
									<view class="price-left">¥{{item.has_many_option_levels[0]['group_price']}}</view>
									<view><text style="color: #B2B2B2;">成团：</text>{{item.has_many_team_count}}次</view>
								</view>
							</view>
							<view class="right-box" @click="junit('/pages/index/goods-detail/goods-detail', {id: item.fight_id});">
								<image class="tips-image" src="../../static/images/tabbar/hot-group-select.png"></image>
								<view style="margin-top: 19upx; font-size: 16upx; color: #FFFFFF;">拼后领补贴</view>
								<view style="font-size: 16upx; color: #FFFFFF;">{{item.ba_team.has_many_success_member_count}}人已领取</view>
								<view class="right-box-footer">
									<text>马上拼</text>
									<image src="../../static/images/index/loding.png" style="width: 10upx; height: 18upx;"></image>
								</view>
							</view>
						</view>
					</view>
					</mescroll-body>
				</view>
			</view>
	</view>
	
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				title: 'Hello',
	
				tabindex: 0,
				orderState: [],
				homeCollage: [],
				tabList: [],
				type: 0,
				page: 1,
			}
		},
		async onLoad() {
			await this.gethomePagWxapp();
		},
		methods: {
			junit(url, query = {}) {
				this.$Router.push({
					path: url,
					query: query
				});
			},
			onNav(index, nav) {
				this.tabindex = index;
				this.type = nav.id;
				this.page = 1;
				this.downCallback();
			},
			// 下拉刷新列表
			downCallback() {
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			/*上拉加载的回调*/
			upCallback(page) {
				this.page = page.num;
				this.$http.get('index.fightGroupsHomeCollage', {
					i:4,
					uuid:0,
					type:5,
					basic_info:1,
					validate_page: 1,
					route: "test.homeCollage",
					page: this.page,
					cate_id: this.type
				}).then(res => {
					let curPageData = res.data.data;
					let curPageLen = curPageData.length;
					let totalCount = res.data.total;
					if (page.num == 1) this.homeCollage = []; //如果是第一页需手动置空列表
					this.homeCollage = this.homeCollage.concat(curPageData); //追加新数据
					this.mescroll.endBySize(curPageLen, totalCount);
				})
			},
			// 获取拼团分类 
			gethomePagWxapp(){
				return this.$http.get('hotGroup.homePagWxapp').then(res => {
					this.orderState = res.data;
					this.type = this.orderState[0]['id'];
				})
			},
			// 即将成团数据
			getfightGroupsHome(){
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './hot-group.scss';
</style>
